<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
    <style>
        body{
            font-size: 12px;
            font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", "Microsoft Yahei", Arial, sans-serif;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #app{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            /*box-sizing: border-box;*/
            padding-left: 10px;
            padding-right: 10px;
            /*padding-bottom: 20px;*/
            /*overflow: hidden;*/
            /*overflow-x: hidden;*/
        }
        .fields{
            padding: 10px;
        }
        .fields .item{
            padding-top: 4px;
            padding-bottom: 4px;
            color: #00a4ff;
        }
        #hot-display-license-info{
            display: none !important;
        }

        .left-toolbar{
            margin-right: 10px;
            width: 200px;
            overflow: hidden;
            overflow-y: auto;
            max-height: 500px;
        }

        /*.table,.table tr th, .table tr td { border:1px solid #0094ff;*/
        /*    padding-top: 5px;*/
        /*    padding-bottom: 5px;*/
        /*}*/
        /*.table { border-collapse: collapse; padding:2px;}*/

        .form-item{
            margin-bottom: 10px;
        }
        .form-item input[type=text]{
            width: 100%;
        }
        .form-item textarea{
            width: 100%;
        }
        hr{
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .fields .tle{
            margin-top: 5px;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group-sm{
            margin-bottom: 10px;
        }
    </style>
<!--    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
<!--    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">-->

    <script src="../lib/handsontable/handsontable.full.min.js"></script>
    <link rel="stylesheet" href="../lib/handsontable/handsontable.full.min.css">
    <script src="../lib/vue/vue-util.js"></script>
    <script src="../lib/layer/layer.js"></script>
    <script src="../lib/handsontable/languages/zh-CN.min.js"></script>
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>
    <div id="app">
        <div class="form-group-sm">
            <label for="">
                报表名
            </label>
            <input type="text" v-model="data.name" class="form-control">
        </div>
        <div class="form-group-sm" style="display: none">
            <label for="">
                报表说明
            </label>
            <textarea name="" id="" cols="30" rows="3" v-model="data.info" class="form-control"></textarea>
        </div>
        <div style="display: flex; flex: 1; overflow: hidden;">
            <div class="left-toolbar">
                <select name="" id="" v-model="data.dataSource" class="form-control">
                    <option value="">选择数据源</option>
                    <optgroup v-for="v in modelsWithCat" :label="v.name">
                        <option v-for="vv in v.children" :value="vv._id">{{vv.modelName}}</option>
                    </optgroup>
                </select>
                <div class="fields">
                    <div class="tle">统计</div>
                    <div class="item fx" draggable="true" @dragstart="drag">时间分组</div>
                    <div class="item fx" draggable="true" @dragstart="drag">字段分组</div>
<!--                    <div class="item fx" draggable="true" @dragstart="drag">分组求和</div>-->
                    <div class="item fx" draggable="true" @dragstart="drag">分组计数</div>
<!--                    <div class="item fx" draggable="true" @dragstart="drag">函数-相加</div>-->
<!--                    <div class="item fx" draggable="true" @dragstart="drag">函数-相减</div>-->
                    <div class="tle">分组字段</div>
                    <div class="item" v-for="v in customFields" draggable="true" @dragstart="drag">{{v}}</div>
                    <div class="tle">汇总字段</div>
                    <div class="item" v-for="v in collectFields" draggable="true" @dragstart="drag">{{v}}</div>
                    <div class="tle">流程字段</div>
                    <div class="item" v-for="v in selfFields" draggable="true" @dragstart="drag">{{v}}</div>
                    <div class="tle">表单字段</div>
                    <div class="item" v-for="v in fields" draggable="true" @dragstart="drag">{{v}}</div>
                </div>
            </div>
            <div style="flex: 1; max-height: 500px; overflow: auto;" class="form-group-sm">
                <div>
                    <h5>检索条件</h5>
                    <div id="condition-box" >
                        <table width="100%" class="table table-bordered table-striped">
                            <tr>
                                <th>名字</th>
                                <th>字段</th>
                                <th>类型</th>
                                <th>运算符</th>
                                <th>
                                    取值
                                </th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="(v,i) in data.rules">
                                <td>
                                    <input type="text" v-model="v.name" class="form-control">
                                </td>
                                <td>{{v.field}}</td>
                                <td>
                                    <select v-model="v.type" class="form-control">
                                        <option value="text">文本</option>
                                        <option value="date">时间</option>
                                    </select>
                                </td>
                                <td>
                                    <div class="radio" v-for="(vv) in ops" style="display: inline-block; margin-right: 10px;">
                                        <label>
                                            <input type="radio" :value="vv" v-model="v.op">
                                            {{vv}}
                                        </label>
                                    </div>
                                </td>
                                <td>
                                    <input v-model="v.value" :type="v.type" placeholder="不填为用户填写">
                                </td>
                                <td>
                                    <a href="javascript:;" class="btn btn-sm btn-danger" @click="data.rules.splice(i,1)">
                                        删除
                                    </a>
                                </td>
                            </tr>
                        </table>
                        <div id="condition-drop-box" @drop="dropCondition" @dragover="allowDrop" style="height: 50px; width: 100%;text-align: center; line-height: 50px">将字段拖入这里</div>
                    </div>
                </div>
                <hr>
                <h5>分组字段</h5>
                <div >
                    <a class="btn btn-sm btn-primary" href="javascript:;" @click="addGroup">添加分组</a>
                    <div v-for="(v,i) in data.groups" style="padding-top: 4px;padding-bottom: 4px;">
                        <a class="btn btn-sm btn-danger" href="javascript:;" @click="data.groups.splice(i,1)">删除该组</a>
                        <table width="100%" class="table table-bordered table-striped">
                            <tr>
                                <th width="120">字段名</th>
                                <th>类型</th>
                                <th width="120">目标</th>
                                <th>排序</th>
<!--                                <th>分组条件</th>-->
                                <th>分组选项</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="(vv,ii) in v" align="center">
                                <td>
                                    <input type="text" v-model="vv.name" class="form-control">
                                </td>
                                <td>{{vv.type}}</td>
                                <td >
                                    <input type="text" v-model="vv.target" class="form-control">
                                </td>
                                <td>
                                    <label >
                                        升序
                                        <input type="radio" :name="vv.name" value="asc" v-model="vv.sort" >
                                    </label>
                                    <label >
                                        降序
                                        <input type="radio" :name="vv.name" value="desc" v-model="vv.sort">
                                    </label>
                                    <label >
                                        不排序
                                        <input type="radio" :name="vv.name" :checked="!vv.sort" @change="vv.sort = ''">
                                    </label>
                                </td>
<!--                                <td>-->
<!--                                    <input type="checkbox" value="y" :checked="vv.isGroupBy == 'y'" @change="vv.isGroupBy = $event.target.checked ? 'y' : 'n' ">-->
<!--                                </td>-->
                                <td>
                                    <div v-if="vv.type == '时间分组'">
                                        时间格式化参数
                                        <input type="text" v-model="vv.dateFormat"  >

                                        <div>
                                            时间周期
                                            <input type="text" placeholder="不填写的情况，则不使用统计周期" v-model="vv.dateLoop">
                                        </div>
                                    </div>
                                    <div v-if="vv.type == '函数-相加' || vv.type == '函数-相减'">
                                        左： <input type="text" v-model="vv.left">
                                        <br>
                                        右： <input type="text" v-model="vv.right">
                                    </div>
                                </td>
                                <td>
                                    <a class="btn btn-sm btn-danger" href="javascript:;" @click="v.splice(ii,1)">删除</a>
                                </td>
                            </tr>
                        </table>
                        <div style="height: 40px; line-height: 40px; border-bottom: 1px solid #ddd; text-align: center"  @drop="dropGroupBy($event, v)" @dragover="allowDrop" class="group-by" :data-index="i">
                            将统计拖入这里
                        </div>
                    </div>
                </div>
                <hr>
                <h5>汇总字段</h5>
                <div>
                    <a class="btn btn-sm btn-primary" href="javascript:;" @click="addCollect">添加汇总</a>
                    <table width="100%" class="table table-bordered table-striped">
                        <tr>
                            <th width="120">字段名</th>
                            <th>汇总条件</th>
                            <th width="300">汇总汇总表达式</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(v,i) in data.collect">
                            <td>
                                <input type="text" v-model="v.name" class="form-control">
                            </td>
                            <td>
                                <input type="text" v-model="v.condition" style="width: 300px" class="form-control">
                            </td>
                            <td>
                                <input type="text" v-model="v.expression" style="width: 300px" class="form-control">
                            </td>
                            <td>
                                <a class="btn btn-sm btn-danger" href="javascript:;" @click="data.collect.splice(i,1)">删除</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <hr>
                <h5>报表正文</h5>
                <div style="padding-top: 4px;padding-bottom: 8px;">
                    <a class="btn btn-sm btn-primary" href="javascript:;" @click="addReport">添加报表</a>
                    <div class="btn-group dropup">
                        <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
                                data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            添加图表 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
<!--                            <li>-->
<!--                                <a href="#" @click="addLineImage">折线图</a>-->
<!--                            </li>-->
                            <li>
                                <a href="#" @click="addPieImage">饼图</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <template v-for="(v,i) in (data.reports || [])" >
                    <div class="form-group-sm">
                        <div style="padding-bottom: 8px;">
                            表名： <input type="text" v-model="v.name" class="form-control" style="display: inline-block; width: 250px;">
                            <a class="btn btn-sm btn-danger" href="javascript:;" @click="data.reports.splice(i,1)">删除报表</a>
                        </div>
                        <report-excel :data="v" :i="i" v-if="v.type == 'excel'" ref="excelReport"></report-excel>
                        <report-pie :data="v" :i="i" v-if="v.type == 'pie'" ref="excelReport"></report-pie>
                        <!--                    <div v-if="v.type == 'excel'"  :id="'jexcel' + i" @drop="drop" @dragover="allowDrop" style="">-->
                        <!--                    </div>-->
                        <div>

                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div style="text-align: center; ">
            <a href="javascript:;" @click="save" class="btn btn-primary">保存</a>
        </div>
    </div>
</body>
</html>

<script>
    loadComponent("report-excel", "./design.excel.html");
    loadComponent("report-pie", "./design.pie.html");

    var app = new Vue({
        el:"#app",
        data: {
            modelsWithCat : [],
            models:{},
            // dataSource: "",
            selfFields:["流程创建时间"],
            fields: [],
            ops: ["等于", "大于", "小于", "大于等于", "小于等于"],//, "不等于", "包含", "不包含"],
            data:{
                _id: "",
                pid: "",
                name: "",
                info: "",
                rules: [],
                dataSource: "",
                reports:[],
                groups:[],
                collect:[]
            }
        },
        watch:{
            "data.dataSource" : function(nv){
                var t = this;
                $.get("/api/bpm/workflow/getWorkflowFormFields",{id:nv}, function (msg) {
                    if(!msg.success){
                        return;
                    }
                    // console.log(msg.data);
                    t.fields = [];
                    t.models = {};
                    ;(msg.data || []).forEach(e => {
                        t.fields.push(e.title || "");
                        t.models[e.title] = e;
                    });
                    console.log(msg)
                    console.log(t.models)
                },"json");
            }
        },
        computed:{
            customFields:function () {
                var fields = [];
                this.data.groups.forEach(e => {
                    e.forEach(ee => {
                        fields.push(ee.name);
                    });
                });
                return fields;
            },
            collectFields(){
                return this.data.collect.map(e => e.name);
            }
        },
        methods: {
            addCollectCondition(v){
                v.conditions.push({
                    left: "",
                    op: "等于",
                    right: ""
                });
            },
            addCollect(){
                this.data.collect.push({
                    name:"",
                    condition:"",
                    expression: ""
                }) ;
            },
            addLineImage(){
                alert("开发中");
            },
            addPieImage(){
                this.data.reports.push({
                    type: 'pie',
                    name: "",
                    x: "",
                    y: ""
                });
            },
            //添加报表
            addReport(){
                this.data.reports.push({
                    type: 'excel',
                    data: [],
                    merge: [],
                    meta: [],
                    name: ""
                })
            },
            // getFieldMetaData(field){
            //     var ret = this.models[field] || {}
            //     console.log(ret)
            //     return ret;
            // },
            dropInput(e, vv, key){
                var isFunc = e.dataTransfer.getData("isFunc") == 1;
                var txt = e.dataTransfer.getData("Text");
                if(isFunc){
                    return
                }
                if(vv && key){
                    Vue.set(vv, key, txt);
                    e.preventDefault()
                }
            },
            dropGroupBy(e, v){
                var isFunc = e.dataTransfer.getData("isFunc") == 1;
                var txt = e.dataTransfer.getData("Text");
                if(isFunc && v){
                    var groupby = {name: "", type: txt, target: "", isGroupBy: 'n', sort: ""};
                    if(txt == '时间分组'){
                        groupby.dateFormat = "";
                        groupby.dateLoop = "";
                    } else if(txt == '函数-相减' || txt == '函数-相加'){
                        groupby.left = "";
                        groupby.right = "";
                    }
                    v.push(groupby);
                    e.preventDefault()
                }
            },

            addGroup(){
                this.data.groups.push([])
            },
            save(){
                ;(this.$refs.excelReport || []).forEach(e => {
                    e.saveData&&e.saveData();
                    // var i = e.i;
                    // var target = this.data.reports[i];
                    // if(!target){
                    //     return
                    // }
                    // console.log(e)
                    // target.data = e.getData();
                    // target.merge = e.getMerged();
                    // target.meta = e.getMeta();
                });

                ;(this.data.groups||[]).forEach(e => {
                    e.forEach(ee => {
                        ee.isGroupBy = (ee.isGroupBy == 'y' ? 'y' : 'n');
                    })
                });

                // console.log(JSON.stringify(this.data.reports))
                // return;
                // this.data.excel.data = hot.getData();
                // this.data.excel.merge = this.getMerged();
                // this.data.excel.meta = this.getMeta();
                this.data.pid = this.data.pid || getParam("pid");
                this.data._id = this.data.id || getParam("id");
                var t = this;
                $.post("/api/bpm/report/saveModel", JSON.stringify(this.data), function (msg) {
                    if(msg.success){
                        layer.msg("保存成功");
                        t.loadModel(msg.data);
                        parent && parent.app && parent.app.onEdit && parent.app.onEdit(msg.data);
                    }
                }, "json")

            },

            dropCondition(e){
                if(e.target.id == 'condition-drop-box'){
                    //搞进来的字段必须在字段里面
                    var field = e.dataTransfer.getData("Text");
                    var idex = this.fields.findIndex(e =>  e == field);
                    if(idex == -1){
                        idex = this.selfFields.indexOf(field);
                    }
                    if(idex == -1){
                        return;
                    }
                    this.data.rules.push({
                        type:"text",
                        field: field,
                        op:"等于",
                        value:""
                    });
                    e.preventDefault();
                }
            },
            allowDrop(e){
                // console.log("allowDrop",e)
                e.preventDefault();
            },

            drag(e){
                //自定义函数
                if($(e.target).hasClass("fx")){
                    e.dataTransfer.setData("isFunc", 1);
                }
                e.dataTransfer.setData("Text",e.target.innerHTML.trim());
            },

            init(){
                var t =this;
                //id
                var id = getParam("id");
                if(id){
                    $.get("/api/bpm/report/oneModel", {id: id}, function (msg)  {
                        if(!msg.success){
                            return
                        }
                        t.loadModel(msg.data)
                        // t.initExcel()
                    }, "json");
                } else {
                    // this.initExcel()
                }

                var t = this;
                $.get("/api/bpm/workflow/getWorkflowNames2", function (msg) {
                    if(!msg.success){
                        return;
                    }
                    Vue.set(t, "modelsWithCat", msg.data);
                },"json");

            },
            loadModel(data){
                for(var i in data){
                    Vue.set(this.data,  i, data[i]);
                }
            }
        },
        mounted(){
            this.init();
        }
    });
</script>
